<template>
  <div class="home" @click="gotoPlayVideo($event)">
    <div class="nav">
      <span class="styles" @click="goSearch(item.value)" v-for="item in styles" :key="item.value">{{item.label}}</span>
    </div>
    <div class="first-screen">
      <swiper class="swiper"/>
      <div class="hotVideo">
        <PreviewPic v-for="(values,index) in hotVideo" :values="values" :key="index"/>
      </div>
    </div>
    <div class="styleArea" v-for="item in styles" :key="item.value">
      <div class="title">
        <svg class="title-icon" aria-hidden="true">
          <use :xlink:href="item.icon"></use>
        </svg>
        <span>&nbsp;{{item.label}}</span>
      </div>
      <div class="style-preview">
        <PreviewPic v-for="(values,index) in stylePreview[item.value]" :values="values" :key="index">
          <template slot="info" class="info">
            <p class="pre-title">{{values.videoName}}</p>
            <p class="pre-author"><i class="iconfont icon-avatar1"/> {{values.authorName}}</p>
          </template>
        </PreviewPic>
      </div>
      <div class="rank-list">
        <div class="rank-title">排行榜</div>
        <div class="rank-box play" v-for="(value,index) in styleRank[item.value]" :videoid="value.id" :key="index">
          <span class="rank-content"><span class="rank-num">{{index+1}}</span> &nbsp;{{value.videoName}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getVideoByStyle,getVideoByStyle2,getAllHotVideo,getVideoById} from '../api/index'
import {mixin} from '../mixins/index'
import {videoStyles} from '../assets/data/videoStyles'
import Swiper from '../components/Swiper'
import PreviewPic from '../components/PreviewPic'
import { mapGetters } from 'vuex'
export default {
  mixins:[mixin],
  components:{
    Swiper,
    PreviewPic
  },
  data(){
    return {
      styles:[],
      hotVideo:[],
      hotVideoTemp:[],
      stylePreview:[],
      stylePreviewTemp:[],
      styleRank:[],
      styleRankTemp:[],
    }
  },
  computed:{
    ...mapGetters([
      'userId',,
      'collection',
      'history',
    ])
  },
  mounted(){
    this.styles = videoStyles
    this.getData()
  },
  methods:{
    getData(){
      //获取热门视频
      getAllHotVideo()
        .then(res =>{
          for (let i in res) {
            getVideoById(res[i])
            .then(res2 =>{
              this.hotVideoTemp[i] = res2
              if(this.hotVideoTemp.length == 10){
                setTimeout(() => {
                  this.hotVideo = this.hotVideoTemp
                }, 100);
              }
            })
          }
        })
      //获取每个分区的视频
      for(let i in this.styles){
        getVideoByStyle(i)
        .then(res =>{
          this.stylePreviewTemp[i] = res.slice(0,12)
          if(this.stylePreviewTemp.length == 19){
            setTimeout(() => {
              this.stylePreview = this.stylePreviewTemp
            }, 100);
          }
        })

        for(let i in this.styles){
          getVideoByStyle2(i)
          .then(res =>{
            this.styleRankTemp[i] = res.slice(0,10)
            if(this.styleRankTemp.length == 19){
              setTimeout(() => {
                this.styleRank = this.styleRankTemp
              }, 100);
            }
          })
        }
      }
    },
  }
}
</script>

<style>
@import '../assets/css/home.css';
</style>